:root {
  --bd-gray: #767676;
  --color-info1: #dae3e3;
  --box-color: #ccc;
}

.ncard > div:first-child {
  color: #0Af;
  font-weight: bold;
  padding: 3px;
}

.ncard > div:first-child:before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 13px;
  margin-right: 6px;
  border: solid #08f;
  border-width: 0 2px 0 6px;
}

.ncard > div + div {
  background: #049a;
  border: 1px solid #08f;
}

iframe#viewer {
  border: var(--border) !important;
}

.btn-r {
  border-radius: 0;
  padding: 3px 10px;
}

.img {
  background: #FFF1;
  margin: 2px;
  position: relative;
  border: 1px solid #FFF2;
  -webkit-user-drag: none
}

.img > canvas, .img > div {
  height: 100%;
  width: 100%;
  position: absolute;
}

.x-sel > option {
  color: #000;
  padding: 5px 5px;
  margin: 3px;
  background: #ffffff;
  border-bottom: 2px solid #0000;
  transition: background-color 300ms ease-out;
}

.x-sel > option:checked, #ins > option:hover {
  background: #666;
  color: #FFF !important;
  font-weight: bold;
  transition: background-color 100ms ease-out;
  cursor: pointer;
}

.btn, button, select, input {
  outline: none !important;
}

.x-sel {
  width: 240px;
  background: rgba(255, 255, 255, 0.67);
  color: #FFF;
  text-align: left;
  outline: none !important;
  overflow-y: auto
}

.x-scale {
  -webkit-user-drag: none;
  transform-origin: 0 0;
  user-select: none;
}

:root {
  --transition-dura: 0.3s;
  --hightlight: #3392dc;
  --border: 1px solid gray
}

#viewer {
  background: transparent
}

#viewer.M1 .history {
  display: none
}

#viewer.M2 .realtime, #viewer.M3 .realtime, #viewer.M4 .realtime {
  display: none
}

#viewer.M2 > div > div:nth-child(n+2) {
  display: none
}

#viewer.M2 > div > div.history {
  flex-grow: 1
}

#viewer.M3 > div > div.history {
  border-right: var(--border);
  width: 222px !important;

}

#viewer.M3 #thumbs > div > img {
  width: 200px;
}

#viewer #thumbs > div > .head {
  font-size: small;
}

#CCC {
  background: #FFF;
  border-bottom: var(--border);
}

#CCC > * , .CCC > *{
  /*height: 24px !important;
  padding: 1px 5px;*/
  margin: 0;
  border: none;
  outline: none;
  vertical-align: top;
}

iframe[name="viewer"] {
  border: var(--border)
}

#CCC, .CCC {
  padding: 4px 6px;
  display: flex;
  flex-direction: row;
}

#CCC > input[type="range"] {
  flex-grow: 1;
  max-width: 400px;
}

#CCC button {
  border-color: #0d6efd;
}

#CCC input, #CCC select, .CCC input, .CCC.select {
  border: 1px solid #ddd;
  border-radius: 2px;
}

#thumbs > div {
  display: inline-block;
  position: relative;
  max-width: 250px;
  max-height: 200px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-dura) ease-in-out, border-color var(--transition-dura) ease-in-out;
}

#thumbs > div:hover {
  transform: scale(1.02);
}

#thumbs > div.active {
  transform: scale(1.02);
  border-color: var(--hightlight);
}

.thum-box > .head {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 2px 4px;
}

.sele-comp > option {
  padding: 5px 5px;
  margin: 3px;
  transition: background-color 300ms ease-out;
}

.sele-comp > option:checked, .sele-comp > option:hover {
  border: 1px solid orange;
  font-weight: bold;
  transition: background-color 100ms ease-out;
  cursor: pointer;
}

.sele-comp {
  min-width: 200px;
  text-align: left;
  outline: none !important;
  overflow-y: auto
}

#ctrl {
  border-right: var(--border);
  border-bottom: var(--border)
}

#ctrl input[type=range] {
  width: 100px;
}

span#pos {
  width: 125px;
}

span#info {
  padding-left: 6px;
}

#img-viewer {
  border-right: var(--border);
  position: relative
}

#frame_img {
  cursor: crosshair;
  image-rendering: pixelated;
}

.A {
  color: red;
}

#viewer .card-header {
  padding: 2px 5px;
  font-size: 15px
}

#viewer .card-header:before {
  content: " ";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: #0088ee
}

#viewer table#params {
  font-size: 12px;
}


.xinfo-panel1 {
  width: 400px;
}

.xbg-panel1 {
  background-color: var(--color-info1);
}

.disactive-btn {
  /*background: #ccc;*/
  /*cursor: not-allowed !important;*/
  /*border-color: transparent;*/
}

.disactive-btn:hover {
  /*background: #ccc;*/
  /*border-color: transparent;*/
}

.btn {
  padding: 4px 10px !important;
  line-height: 1;
}
#result td{text-align: right}
#result th{text-align: center}
td> kbd{background: none;border: 1px solid #CCC;color:#000;padding: 1px 5px;font-size: 12px;text-align: right;}
/* limit component width */
input[type="datetime-local"] {
    max-width: 240px;
}
input[type="date"] {
  max-width: 120px;
}
#realtime:not(:disabled),#history:not(:disabled){
  background-color: #7c7a7a !important;
  border-color: #7c7a7a !important;
  /*opacity: 0.75 !important;*/
}
#realtime[disabled], #history[disabled]{
  background-color: #0b5ed7;
  opacity: 1;
}


